<!DOCTYPE html>
<html>
<head>
    @include("/include/_header.html", {'title':'1#天车'}){}
    <script src="${ctxPath}/externaljs/pixijs/pixi.min.js"></script>
    <script src="${ctxPath}/baotou-steel/craneWork/craneWorkPublic.js"></script>
    <script src="${ctxPath}/externaljs/sockjs/sockjs.min.js"></script>
    <script src="${ctxPath}/externaljs/stompjs/stomp.min.js"></script>
    <script src="${ctxPath}/externaljs/websocket/app-websocket.js"></script>
    <script src="${ctxPath}/externaljs/tweenmax/TweenMax.js"></script>
</head>
<body>
<div class="layui-row" style="background: url('/QingTongXia/assets/images/background.jpg');">
    <div class="layui-col-md12" style="height: 57em">
        <div class="grid-demo">
            <div id="pixi" style="overflow-x: auto;max-height: 60em"></div>
        </div>
    </div>
    <div class="layui-col-md4 leftContainer">
        <div class="grid-demo grid-demo-bg2">
            <div class="layui-form formOffset">
               <!-- <div class="layui-form-item formItemOffset">
                    <label class="layui-form-label">选择天车：</label>
                    <div class="layui-input-block">
                        <input type="radio" name="selectCrane" value="1" lay-filter="checkCrane" title="1#天车" checked>
                        <input type="radio" name="selectCrane" value="2" lay-filter="checkCrane" title="2#天车">
                    </div>
                </div>-->

            </div>
        </div>
    </div>
    <div class="layui-col-md4" style="width: 50%;color: #08ffe6">
        <div class="grid-demo grid-demo-bg3">
            <div class="layui-form formOffset">
                <div class="layui-input-inline">
                    <div class="layui-form-item formItemOffset">
                        <label class="layui-form-label">抓放点：</label>
                        <input type="radio" name="selectPoint" value="grab" lay-filter="checkPointType" title="抓点" checked id="selectGrabPoint">
                        <input type="radio" name="selectPoint" value="drop" lay-filter="checkPointType" title="放点" disabled id="selectDropPoint">
                    </div>
                </div>
                <div class="layui-input-inline">
                    <div class="layui-form-item formItemOffset">
                        <label class="layui-form-label">工作模式：</label>
                        <div class="layui-input-block">
                            <input type="radio" name="workType" value="move" lay-filter="checkworkType" title="移动" checked>
                            <input type="radio" name="workType" value="load" lay-filter="checkworkType" title="上料">
                            <input type="radio" name="workType" value="pour" lay-filter="checkworkType" title="倒料">
                            <input type="radio" name="workType" value="dump" lay-filter="checkworkType" title="放料">
                        </div>
                    </div>
                </div>

                <div class="layui-input-inline" style="margin-top: -15px">
                    <div class="layui-form-item formItemOffset">
                        <label class="layui-form-label">抓取次数：</label>
                        <div class="layui-input-block">
                            <input type="number" value="1" min="1" step="1" name="catchNumber" id="catchNumber" autocomplete="off" class="layui-input input-extend">
                        </div>
                    </div>
                </div>

                <div class="layui-input-inline" style="margin-top: -15px">
                    <div class="layui-form-item formItemOffset" style="margin-left: 35px">
                        <label class="layui-form-label">运行次数：</label>
                        <div class="layui-input-block">
                            <input type="number" value="1" min="1" step="1" name="runNum" id="runNum" autocomplete="off" class="layui-input input-extend">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item formItemOffset" style="margin-left: 150px;margin-top: 5px">
                    <button class="layui-btn" lay-submit lay-filter="formSubmit" id="formSubmit">开始</button>
                    <button class="layui-btn" id="pauseTask">暂停任务</button>
                    <button class="layui-btn" id="endTask">结束任务</button>
                    <button class="layui-btn" id="resetGrabPoint">重置抓点</button>
                    <button class="layui-btn" id="resetDropPoint">重置放点</button>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md4" style="width: 33%;color: #08ffe6">
        <div class="grid-demo grid-demo-bg3">
            <div class="layui-form formOffset" style="margin-top: 20px">
                <div class="layui-input-inline">
                    <label class="layui-form-label">屏蔽选择</label>
                    <input type="checkbox" name="open" lay-skin="switch" lay-filter="disabledSwitch" title="开启|关闭">
                </div>
                <div class="layui-input-inline" style="margin-top: -4px;margin-left: 15px">
                    <input type="radio" name="disabledPoint" value="disable" disabled lay-filter="disabledPointType" title="屏蔽" checked>
                    <input type="radio" name="disabledPoint" value="enable" disabled lay-filter="disabledPointType" title="恢复">
                </div>
                <div class="layui-input-inline">
                    <button class="layui-btn" id="disablePointsSubmit">提交</button>
                </div>
            </div>
            <div class="layui-input-inline" style="margin-left: 50px;margin-top: 30px">
                <button class="layui-btn" id="setTrainZoneMaterial">火车物料配置</button>
            </div>
        </div>
    </div>
</div>

@include("/include/_container.html", {'js':''}){}
<script>
    layui.use(['table', 'form', 'laydate'], function () {
        let $ = layui.$;
        var form = layui.form;

        var craneNo = 1;
        //框选各类点位的颜色
        const grabCorlor = 0x00BFFF;
        const dropCorlor = 0xFF00FF;
        const disabledCorlor = 0x000000;
        const enableColor = 0xA52A2A;
        //已经被屏蔽的颜色
        const dataDisabledColor = 0xAAAAAA;
        //鼠标拖动时动态矩形颜色
        const selectRectColor = 0x000000;
        //单元格边框颜色
        const boxCorlor = 0xFFFFFF;
        //高度文本颜色
        const textColor = 0x000000;

        //上料仓颜色
        const siloColor = 0xFFE7BA;
        //墙的颜色
        const wallColor = 0xFFB90F;

        //需要更新的数据集合
        const updateRectangles = [];
        const rectangles = [],grabPoints = [],dropPoints = [],disabledPoints = [],enablePoints = [],trainCells = [];
        var pointType = "grab";
        var workType = "move";
        //屏蔽开关
        var disabledSwitch = false;
        const boxWidth = 12,boxHeight = 12;
        //拖拽框偏移量
        const mouseOffset = boxWidth/2;
        //真实点位宽高 500x500 一个格子0.5米；1000 * 1000 一个格子1m
        // const realWidth = 1000,realHeight = 1000;
        const realWidth = 500,realHeight = 500;
        //库区真实宽高度 200m * 30m
        const realWidthMeters = 210,realHeightMeters = 30;
        //二位网格图的原点偏移量
        const coordinateOffsetX = 100,coordinateOffsetY = -70;

        const rectGraphicMap = new Map();//存储单元格对象
        const textMap = new Map();//存储高度文本对象
        var rectGraphics = [],selectionRect;

        const cellRex = /^c_/;
        const trainRex = /^t_/;

        const bigCraneMap = new Map();//用于更新大小车位置
        const smallCraneMap = new Map();

        const poolVirtualZoneMap = new Map(); //池子和子区域对应关系map集合 key：池子id  value：子区域集合
        const poolVirtualZoneFrequencyMap = new Map();

        const virtualZoneMaterialMap = new Map();
        const trainZoneMaterialMap = new Map();
        const siloNameMatreialMap = new Map();

        // 创建Pixi应用程序并添加到DOM元素中
        const app = new PIXI.Application({
            width: boxWidth * (realWidthMeters * 1000/realWidth + 10),
            height: boxHeight * (realHeightMeters *1000/realHeight + 5),
            backgroundColor: 0x021e2e
        });
        document.getElementById("pixi").appendChild(app.view);


        //火车区域设置
        $("#setTrainZoneMaterial").click(function (){
            layer.open({
                type: 2,
                title: '火车物料配置',
                shadeClose: true,
                shade: 0.8,
                area: ['1500px', '600px'],
                content: CXL.ctxPath + "/trainZone/addMaterialId",
                btn: ['确定', '取消'],
                yes: function (index, layero) {
                    //点击确认触发 iframe 内容中的按钮提交
                    var submit = layero.find('iframe').contents().find("#form-btn-save");
                    submit.click();
                    location.reload();
                }
            });
        })

        //工作模式切换
        form.on('radio(checkworkType)',function (data){
            if (!disabledSwitch){
                workType = data.value;
                // console.log(data.value)
                if (workType == "move"){
                    pointType = "grab";
                    document.getElementById("selectGrabPoint").checked = true;
                    recoverRectColor(dropPoints,false);
                    $("#selectDropPoint").attr("disabled",true);
                    $("#selectDropPoint").next().addClass("layui-radio-disabled");
                    form.render();
                }else{
                    $("#selectDropPoint").attr("disabled",false);
                    $("#selectDropPoint").next().removeClass("layui-radio-disabled");
                    $("#selectDropPoint").next().removeClass("layui-disabled");
                }

                if (workType == "dump"){
                    pointType = "drop";
                    document.getElementById("selectDropPoint").checked = true;
                    recoverRectColor(grabPoints,false);
                    $("#selectGrabPoint").attr("disabled",true);
                    $("#selectGrabPoint").next().addClass("layui-radio-disabled");
                    form.render();
                }else{
                    $("#selectGrabPoint").attr("disabled",false);
                    $("#selectGrabPoint").next().removeClass("layui-radio-disabled");
                    $("#selectGrabPoint").next().removeClass("layui-disabled");
                }

                if (workType == "load"){
                    removePointsAndRecoverRect(grabPoints);
                }

                if (workType == "pour"){
                    removePointsAndRecoverRect(grabPoints);
                    removePointsAndRecoverRect(dropPoints);
                }
                // console.log(pointType)
            }
        })

        //点位类型选择
        form.on('radio(checkPointType)',function (data){
            if (!disabledSwitch){
                pointType = data.value;
            }
            console.log("pointType " + pointType)
        })

        //屏蔽/恢复
        form.on('radio(disabledPointType)',function (data){
            if (disabledSwitch){
                pointType = data.value;
                if (pointType == "disable"){
                    recoverRectColor(enablePoints,true);
                }else if (pointType == "enable"){
                    recoverRectColor(disabledPoints,false);
                }
            }
            console.log("pointType " + pointType)
        })

        /**
         *
         * 屏蔽点开关
         */
        form.on('switch(disabledSwitch)',function (data){
            disabledSwitch = this.checked ? true : false;
            if (disabledSwitch){
                //点位选择
                $("input[type=radio][name='selectPoint']").attr("disabled",true);
                $("input[type=radio][name='selectPoint']").next().addClass("layui-radio-disabled");
                //工作模式
                $("input[type=radio][name='workType']").attr("disabled",true);
                $("input[type=radio][name='workType']").next().addClass("layui-radio-disabled");

                // pointType = "disable";
                $("input[type=radio][name='disabledPoint']").attr("disabled",false);
                $("input[type=radio][name='disabledPoint']").next().removeClass("layui-radio-disabled");
                $("input[type=radio][name='disabledPoint']").next().removeClass("layui-disabled");

                pointType = $("input[name='disabledPoint']:checked").val();
                recoverRectColor(grabPoints,false);
                recoverRectColor(dropPoints,false);
            }else{
                $("input[type=radio][name='selectPoint']").attr("disabled",false);
                $("input[type=radio][name='selectPoint']").next().removeClass("layui-radio-disabled");
                $("input[type=radio][name='selectPoint']").next().removeClass("layui-disabled");

                $("input[type=radio][name='workType']").attr("disabled",false);
                $("input[type=radio][name='workType']").next().removeClass("layui-radio-disabled");
                $("input[type=radio][name='workType']").next().removeClass("layui-disabled");

                $("input[type=radio][name='disabledPoint']").attr("disabled",true);
                $("input[type=radio][name='disabledPoint']").next().addClass("layui-radio-disabled");

                if (workType == "move"){
                    $("#selectDropPoint").attr("disabled",true);
                    $("#selectDropPoint").next().addClass("layui-radio-disabled");
                    form.render();
                }

                if (workType == "dump"){
                    $("#selectGrabPoint").attr("disabled",true);
                    $("#selectGrabPoint").next().addClass("layui-radio-disabled");
                    form.render();
                }

                pointType = $("input[name='selectPoint']:checked").val();
                recoverRectColor(disabledPoints,false);
                recoverRectColor(enablePoints,true);
            }
            console.log("pointType " + pointType)
            console.log("workType " + workType)
        })


        //表单提交
        $("#formSubmit").click(function (){
            // console.log($("input[name='workType']:checked").val())
            const grabList = [],dropList = [],grabTrainZoneList = [],grabCellZoneList = [],dropZoneList = [];
            grabPoints.forEach((item,index) => {
                console.log("grab " + (index+1) + " " +item.name + " " + item.originX + " " + item.originY);
                let grabData = {
                    name: item.name,
                    x: item.originX,
                    y: item.originY,
                    height: item.dataHeight,
                    cellType: item.cellType
                }
                grabList.push(grabData)
                if (!grabCellZoneList.includes(item.zoneId) && item.cellType == "cell"){
                    grabCellZoneList.push(item.zoneId);
                }
                if (!grabTrainZoneList.includes(item.zoneId) && item.cellType == "train"){
                    grabTrainZoneList.push(item.zoneId);
                }
            })
            dropPoints.forEach((item,index) => {
                console.log("drop " + (index+1) + " " +item.name + " " + item.originX + " " + item.originY)
               let dropData = {
                   name: item.name,
                   x: item.originX,
                   y: item.originY,
                   height: item.dataHeight,
                   cellType: item.cellType
               }
                dropList.push(dropData)
                if (!dropZoneList.includes(item.zoneId)){
                    dropZoneList.push(item.zoneId);
                }
            })

            layer.alert(JSON.stringify({
                workType: workType,
                craneNo: craneNo,
                grabList: grabList,
                dropList: dropList,
                catchNumber: document.getElementById("catchNumber").value,
                runNum: document.getElementById("runNum").value
            }))

            console.log("cell" + grabCellZoneList);
            console.log("train " + grabTrainZoneList);
            console.log("drop " + dropZoneList);

            if (grabList.length == 0 && dropList.length == 0){
                CXL.error("请勿提交空任务！");
            }else if (workType == "move" && grabList.length != 1){
                CXL.error("移动模式，终点只能有一个！");
            }else if(workType == "dump" && dropList.length != 1){
                CXL.error("放料模式只可选择一个终点！");
            }else if (workType == "load" && dropList.length != 1 && dropList.length != 0){
                CXL.error("上料模式只可选择一个终点！")
            }else if (workType == "load" && (grabList.length == 0 || dropList.length == 0)){
                CXL.error("上料模式，未选择起点或终点！")
            }else if (workType == "pour" && (grabList.length == 0 || dropList.length == 0)){
                CXL.error("倒料模式，未选择起点或终点！")
            }else if (grabCellZoneList.length > 0 && grabTrainZoneList.length > 0){
                CXL.error("不允许同时将火车和库区内的点同时选做抓点！")
            } else if ((grabCellZoneList.length > 1 || grabTrainZoneList.length > 1) && dropZoneList.length > 1){
                CXL.error("抓点和放点都含有多种物料，请重新选择！")
            }else{
                let taskInfo = JSON.stringify({
                    workType: workType,
                    craneNo: craneNo,
                    grabList: grabList,
                    dropList: dropList,
                    catchNumber: document.getElementById("catchNumber").value,
                    runNum: document.getElementById("runNum").value
                })

                if (workType == "load" && (grabCellZoneList.length > 1 || grabTrainZoneList.length > 1)){
                    layer.confirm('上料模式，抓点区域包含多种物料，确定提交任务？', {
                        btn: ['确定', '关闭'] //按钮
                    }, function(){
                        postTask(taskInfo);
                    }, function(){
                        layer.msg('任务取消');
                    });
                }else if (workType == "load" && (grabCellZoneList.length == 1 || grabTrainZoneList.length == 1)){
                    let grabMaterial,dropMaterial;
                    if (dropList[0].cellType == "silo"){
                        dropMaterial = getMaterialFromSiloByName(dropList[0].name);
                    }else if (dropList[0].cellType == "cell"){
                        dropMaterial = getMaterialByVirtualZoneId(dropZoneList[0]);
                    }
                    if (grabCellZoneList.length == 1){
                        grabMaterial = getMaterialByVirtualZoneId(grabCellZoneList[0]);
                    }else if (grabTrainZoneList.length == 1){
                        grabMaterial = getMaterialByTrainZoneId(grabTrainZoneList[0]);
                    }
                    if (grabMaterial == dropMaterial){
                        postTask(taskInfo);
                    }else{
                        layer.confirm('上料模式，抓点区域物料类型与上料仓物料类型不一致，确定提交任务？', {
                            btn: ['确定', '关闭'] //按钮
                        }, function(){
                            postTask(taskInfo);
                        }, function(){
                            layer.msg('任务取消');
                        });
                    }
                }else if (workType == "pour" && grabCellZoneList.length > 1 && dropZoneList.length == 1){
                    layer.confirm('倒料模式，抓点区域包含多种物料，确定提交任务？', {
                        btn: ['确定', '关闭'] //按钮
                    }, function(){
                        postTask(taskInfo);
                    }, function(){
                        layer.msg('任务取消');
                    });
                }else if (workType == "pour" && grabCellZoneList.length == 1 && dropZoneList.length > 1){
                    layer.confirm('倒料模式，放点区域包含多种物料，确定提交任务？', {
                        btn: ['确定', '关闭'] //按钮
                    }, function(){
                        postTask(taskInfo);
                    }, function(){
                        layer.msg('任务取消');
                    });
                }else if (workType == "pour" && grabCellZoneList.length == 1 && dropZoneList.length == 1){
                    let grabMaterial = getMaterialByVirtualZoneId(grabCellZoneList[0]);
                    let dropMaterial = getMaterialByVirtualZoneId(dropZoneList[0]);
                    if (grabMaterial == dropMaterial){
                        postTask(taskInfo)
                    }else {
                        layer.confirm('倒料模式，抓点区域与放点区域的物料不一致，确定提交任务？', {
                            btn: ['确定', '关闭'] //按钮
                        }, function(){
                            postTask(taskInfo);
                        }, function(){
                            layer.msg('任务取消');
                        });
                    }
                }else {
                    postTask(taskInfo);
                }

            }
        })

        //提交任务
        function postTask(taskInfo){
            $.ajax({
                url: CXL.ctxPath + '/semiauto/submitTask',
                type: 'POST',
                contentType: "application/json",
                /*data: JSON.stringify({
                    workType: workType,
                    craneNo: craneNo,
                    grabList: grabList,
                    dropList: dropList,
                    catchNumber: document.getElementById("catchNumber").value,
                    runNum: document.getElementById("runNum").value
                }),*/
                data: taskInfo,
                success: function(res) {

                },
                error: function(error) {
                    console.log('Error:', error);
                }
            })
        }

        //火车区域和物料绑定
        $.ajax({
            url: CXL.ctxPath + '/trainZone/list',
            type: 'GET',
            aynsc: false,
            success: function(res) {
                res.forEach((d) => {
                    trainZoneMaterialMap.set(d.id,d.materialId);
                })
            },
            error: function(error) {
                console.log('Error:', error);
            }
        })

        //通过子区域id获取物料id
        function getMaterialByVirtualZoneId(virtualZoneId){
            console.log("v")
            console.log(virtualZoneMaterialMap)
            return virtualZoneMaterialMap.get(virtualZoneId);
        }

        //通过火车子区域id获取物料id
        function getMaterialByTrainZoneId(trainZoneId){
            console.log("t")
            console.log(trainZoneMaterialMap);
            return trainZoneMaterialMap.get(trainZoneId);
        }

        //通过上料仓名称获取物料id
        function getMaterialFromSiloByName(siloName){
            console.log("s")
           console.log(siloNameMatreialMap)
            return siloNameMatreialMap.get(siloName);
        }


        /***
         *
         * 屏蔽点提交
         */
        $("#disablePointsSubmit").click(function (){
            let updateList = [],isDisable = 1;
            if (pointType == "disable"){
                updateList = storeUpdateListData(disabledPoints);
            }else if (pointType == "enable"){
                isDisable = 0;
                updateList = storeUpdateListData(enablePoints);
            }
            if (updateList.length > 0){
                $.ajax({
                    url: CXL.ctxPath + '/cell/disableOrEnablePoints',
                    type: 'POST',
                    contentType: "application/json",
                    data: JSON.stringify({
                        isDisabled: isDisable,
                        updateList: updateList
                    }),
                    success: function(res) {
                        console.log(res)
                        if (res.success){
                            if (isDisable == 1){
                                updateRectColor(disabledPoints,true);
                            }else{
                                updateRectColor(enablePoints,false);
                            }
                            layer.msg(res.msg)
                        }else{
                            layer.msg(res.msg)
                        }

                    },
                    error: function(error) {
                        console.log('Error:', error);
                    }
                })
            }else{
                CXL.error("请选择点位！")
            }
        })

        //重置抓点
        $("#resetGrabPoint").click(function (){
            recoverRectColor(grabPoints,false)
        })

        //重置放点
        $("#resetDropPoint").click(function (){
            recoverRectColor(dropPoints,false);
        })

        //移除上料仓点位和恢复矩形的颜色
        function removePointsAndRecoverRect(points){
            if (points.length > 0){
                console.log(points)
                for (let i = points.length - 1 ; i >= 0; i--){
                    if (points[i].cellType == "silo"){
                        const rectGraphics = rectGraphicMap.get(points[i].name);
                        rectGraphics.isSelect = false;
                        drawRect(rectGraphics,siloColor,rectGraphics.dataX,rectGraphics.dataY,rectGraphics.transformWidth,rectGraphics.transformHeight);
                        points.splice(i,1);
                    }
                }
                console.log(points)
            }
        }

        //恢复未被选中时的颜色
        function recoverRectColor(points,isDisable){
            if (points.length != 0){
                points.forEach((point) => {
                    const rectGraphics = rectGraphicMap.get(point.name);
                    rectGraphics.isSelect = false;
                    let corlor = getHexColor(rectGraphics.dataHeight);
                    if (rectGraphics.isWall){
                        corlor = wallColor;
                    }
                    if (rectGraphics.cellType == "silo"){
                        corlor = siloColor;
                    }
                    if (isDisable){
                        corlor = dataDisabledColor;
                    }
                    drawRect(rectGraphics,corlor,rectGraphics.dataX,rectGraphics.dataY,rectGraphics.transformWidth,rectGraphics.transformHeight);
                })
                points.length = 0;
            }
        }

        function storeUpdateListData(points){
            let updateList = [];
            if (points.length > 0){
                points.forEach((point) => {
                    let updateInfo = {
                        name: point.name,
                        cellType: point.cellType
                    }
                    updateList.push(updateInfo);
                })
            }
            return updateList;
        }

        //屏蔽点提交时更新屏蔽标识
        function updateRectColor(points,isDisable){
            if (points.length != 0){
                points.forEach((item,index) => {
                    let logPrefix = isDisable == true ? "disable " : "enable "
                    console.log(logPrefix + (index +1) + " " + item.name);

                    const rectGraphics = rectGraphicMap.get(item.name);
                    rectGraphics.isSelect = false;
                    rectGraphics.isDisabled = isDisable ? true : false;
                    let corlor = getHexColor(rectGraphics.dataHeight);
                    if (rectGraphics.isWall){
                        corlor = wallColor;
                    }
                    if (rectGraphics.cellType == "silo"){
                        corlor = siloColor;
                    }
                    if (isDisable){
                        corlor = dataDisabledColor;
                    }
                    drawRect(rectGraphics,corlor,rectGraphics.dataX,rectGraphics.dataY,rectGraphics.transformWidth,rectGraphics.transformHeight);
                })
                points.length = 0;
            }
        }

        /****************************************   数据   ***********************************************************/
        $.ajax({
            url: CXL.ctxPath + '/cell/list',
            type: 'GET',
            data: {},
            success: function(res) {

                // rectangles.push(res)
                bindPoolVirtualZoneId(res);

            },
            error: function(error) {
                console.log('Error:', error);
            }
        });

        document.addEventListener('contextmenu', function (event) {
            event.preventDefault();
        });

        document.addEventListener('mousedown', function (event) {
            if (event.button === 2) {//右键
                isSelecting = false;
            }
        });

        //渲染单元格并绑定属性
        function drawRectAndBindData(rectData){
            rectData.forEach((rect) => {
                const rectangle = new PIXI.Graphics();
                var rectCorlor = getHexColor(rect.materialHeight);
                let isdisabled = rect.isDisabled == "1" ? true : false;
                let cellType = cellRex.test(rect.name) ? "cell" : trainRex.test(rect.name) ? "train" : "silo";
                let isWall = rect.isWall == "1" ? true : false;
                if (cellType == "silo"){
                    rectCorlor = siloColor;
                }
                if (isWall == true){
                    rectCorlor = wallColor;
                }
                if (isdisabled){
                    rectCorlor = dataDisabledColor;
                }
                rectangle.beginFill(rectCorlor);
                rectangle.drawRect(transformX(rect.x,rect.width),transformY(rect.y,rect.height)
                    ,transformWidth(rect.width),transformHeight(rect.height));
                rectangle.endFill();
                rectangle.eventMode = "static";
                rectangle.buttonMode = true;
                rectangle.name = rect.name;
                rectangle.originX = cellType == "cell" ? rect.realX : rect.x;
                rectangle.originY = cellType == "cell" ? rect.realY : rect.y;
                rectangle.dataX = transformX(rect.x,rect.width);
                rectangle.dataY = transformY(rect.y,rect.height);
                rectangle.dataHeight = rect.materialHeight;
                rectangle.transformWidth = transformWidth(rect.width);
                rectangle.transformHeight = transformHeight(rect.height);
                rectangle.isDisabled = isdisabled;
                rectangle.isSelect = false;
                rectangle.cellType = cellType;
                rectangle.isWall = isWall;
                rectangle.zoneId = rect.virtualZoneId == null ? -1 : rect.virtualZoneId;
                rectangle.on('click',function (){
                    console.log("name "+ rectangle.name +" oraginX " + rectangle.originX + " oraginY " + rectangle.originY);
                    console.log(rectangle)

                    drawRectByCondition(rectangle,true);

                })
                rectangle.on('rightdown',function (){
                    if (rect.virtualZoneId != null && rectangle.cellType == "cell"){
                        layer.open({
                            type: 2,
                            title: '编辑',
                            shadeClose: true,
                            shade: 0.8,
                            area: ['1500px', '900px'],
                            content: CXL.ctxPath + "/virtualZone/add?id=" + rect.virtualZoneId,
                            btn: ['确定', '取消'],
                            yes: function (index, layero) {
                                //点击确认触发 iframe 内容中的按钮提交
                                var submit = layero.find('iframe').contents().find("#form-btn-save");
                                submit.click();
                                location.reload();
                            }
                        });
                    }
                })
                app.stage.addChild(rectangle);
                rectGraphicMap.set(rect.name,rectangle);
                rectGraphics.push(rectangle)

                let color = boxCorlor;
                if (rect.virtualZoneId != null && rectangle.cellType == "cell"){
                    // 使用 forEach 方法遍历 Map 中的键值对
                    poolVirtualZoneMap.forEach((value, key) => {
                        // 判断值是否存在于数组中
                        if (value.includes(rect.virtualZoneId)) {
                            if (poolVirtualZoneFrequencyMap.has(key)){

                                let idArray = poolVirtualZoneFrequencyMap.get(key);
                                if (!idArray.includes(rect.virtualZoneId)) {
                                    // 如果不包含，则将元素插入数组中
                                    idArray.push(rect.virtualZoneId);
                                    color = getRectBorderColor(idArray.length - 1);
                                }else{
                                    color = getRectBorderColor(idArray.indexOf(rect.virtualZoneId))
                                }
                            }else {
                                // 如果不存在，创建一个新的数组，并将当前 id 添加到数组中
                                poolVirtualZoneFrequencyMap.set(key, [rect.virtualZoneId]);
                                color = getRectBorderColor(0);
                            }
                        }
                    });
                }
                const graphics = new PIXI.Graphics();
                graphics.lineStyle(1.4, color, 1, 0);
                graphics.uniqueName = trainRex.test(rect.name) ? "train" : "other";
                graphics.drawRect(transformX(rect.x,rect.width), transformY(rect.y,rect.height),rectangle.transformWidth,rectangle.transformHeight);
                app.stage.addChild(graphics);
            });
            // console.log(rectGraphics)
        }

        function clearTrainCell(){
            app.stage.children = app.stage.children.filter(child => child.cellType !== "train");
            app.stage.children = app.stage.children.filter(child => child.uniqueName !== "train");
            for (const key of rectGraphicMap.keys()) {
                if (key.startsWith('t_')) {
                    rectGraphicMap.delete(key);
                }
            }
            for (let i = rectGraphics.length - 1; i >= 0; i--) {
                if (rectGraphics[i].cellType === "train") {
                    rectGraphics.splice(i, 1);
                }
            }
        }



        var stompClient = null; // 声明一个全局变量来存储Stomp客户端实例
        //建立Stomp连接的函数
        connect();
        function connect() {
            var socket = new SockJS('/websocket-endpoint'); // 创建WebSocket连接
            stompClient = Stomp.over(socket); // 创建Stomp客户端实例
            stompClient.debug = null;
            stompClient.connect({}, function(frame) {
                // 订阅消息
                $.ajax({
                    url: CXL.ctxPath + '/connectInfo/getPlcSn',
                    type: 'POST',
                    data: {
                        craneNo: craneNo
                    },
                    success: function(res) {
                        let plcSn = null,tipFlag = false;
                        if (res.plcSn != null) plcSn = res.plcSn;
                        stompClient.subscribe('/topic/plcData/' + plcSn, function(message) {

                            let data = JSON.parse(message.body);
                            // console.log(data)
                            if (data['当前时间'] != null){
                                if (tipFlag){
                                    layer.msg('PLC重新连接');
                                    tipFlag = false;
                                }
                                let craneX = parseInt(data[craneNo + '号车大车坐标']);
                                let craneY = parseInt(data[craneNo + '号车小车坐标'])
                                updateCranePosition(craneX,craneY);
                            }else{
                                if (!tipFlag){
                                    CXL.error(data);
                                    tipFlag = true;
                                }
                            }

                        });
                    },
                    error: function(error) {
                        console.log('Error:', error);
                    }
                })
            });
        }

        // 关闭Stomp连接的函数
        function disconnect() {
            if (stompClient !== null) {
                stompClient.disconnect(); // 关闭Stomp连接
                console.log('Disconnected from WebSocket');
            }
        }

        // 页面关闭时触发的事件
        window.onbeforeunload = function() {
            disconnect(); // 调用关闭连接的函数
        };

       /* setTimeout(function () {
            clearTrainCell();
        }, 5000)*/

        function testA(){
            const name = "c_10000";
            const isDisabled = "0";
            const materialHeight = Math.floor(Math.random() * 10000);
            updateRectangles.push({name,isDisabled,materialHeight});
            updateData()
        }

        function testB(){
            const name = "c_37435";
            const isDisabled = "1";
            const materialHeight = Math.floor(Math.random() * 10000);
            updateRectangles.push({name,isDisabled,materialHeight});
            updateData();
        }

        function testC(){
            const name = "c_36067";
            const isDisabled = "0";
            const materialHeight = Math.floor(Math.random() * 10000);
            updateRectangles.push({name,isDisabled,materialHeight});
            updateData();
        }

        /*setInterval(function (){
            testA()
            testB();
            testC();
        },10000)*/


        /*setTimeout(function (){
            for (let i = 0; i <= 10; i++){
                for (let j = 0; j <= 10; j++){
                    const  x = 10000 + i * 1000;
                    const y = 1000 + j * 1000;
                    const width = 1000;
                    const height = 1000;
                    const materialHeight = Math.floor(Math.random() * 10000);
                    const isDisabled = (Math.ceil(Math.random()*100))%7 == 0 ? "1" : "0";
                    const name = "t_" + i + j;
                    trainCells.push({ name,x,y,width,height,materialHeight,isDisabled })
                }
            }
            test()
        },15000)*/

        function test(){
            console.log(app.stage.children)
            console.log(rectGraphicMap)
            console.log(rectGraphics)
            drawRectAndBindData(trainCells)
            console.log(app.stage.children)
            console.log(rectGraphicMap)
            console.log(rectGraphics)

        }


        /*******************************************************************************************************/

        function transformX(x,w){
            return (x - w/2)/w * (w/realWidth) *boxWidth + coordinateOffsetX;
        }
        function transformY(y,h){
            return app.screen.height - ((y + h/2)/h * (h/realHeight) * boxHeight) + coordinateOffsetY;
        }

        function transformWidth(w){
            return w/realWidth * boxWidth;
        }

        function transformHeight(h){
            return h/realHeight * boxHeight;
        }

        /**
         * 高度标识卡片
         */
        const imageTexture = PIXI.Texture.from('/QingTongXia/assets/images/ruler.png');
        const imageSprite = new PIXI.Sprite(imageTexture);
        // 设置图片精灵的位置
        imageSprite.x = 0;
        imageSprite.y = app.screen.height - 450;
        // 将图片精灵添加到舞台（stage）中
        app.stage.addChild(imageSprite);


        /**
         * 坐标轴标注
         */
        const coordinateAxisX = new PIXI.Graphics();
        coordinateAxisX.lineStyle(5, 0x66FF00);
        coordinateAxisX.moveTo(transformX(realWidth/2,realWidth),app.screen.height - 30);
        coordinateAxisX.lineTo(transformX(realWidth * (realWidthMeters * 1000/realWidth) + realWidth/2,realWidth),app.screen.height - 30);
        //0.5m * 0.5m：标注间隔->5m  1m * 1m：标注间隔->10m
        let cellNumber = (realWidthMeters * 1000/realWidth + 5) * 2;
        let cellInterval = 20;
        let cellTextNumber = (realWidthMeters * 1000/realWidth) * 2;
        for (let i = 0 ; i < cellNumber ; i+= cellInterval){
            coordinateAxisX.moveTo(transformX(realWidth/2 * i + realWidth/2,realWidth),app.screen.height - 27);
            coordinateAxisX.lineTo(transformX(realWidth/2 * i + realWidth/2,realWidth),app.screen.height - 45);
        }
        for (let i = 0 ; i <= cellTextNumber ; i+= cellInterval){
            const coordinateAxisXText = new PIXI.Text(realWidth == 500 ? i/4 : i/2, {fontSize: 20, fill: 0x66FF00});
            coordinateAxisXText.x = (realWidth == 500 ? i/4 : i/2) >= 100 ? transformX(realWidth/2 * i,realWidth) - coordinateAxisXText.width/4 : transformX(realWidth/2 * i,realWidth);
            coordinateAxisXText.y = app.screen.height - 22;
            app.stage.addChild(coordinateAxisXText);
        }
        app.stage.addChild(coordinateAxisX);


        //更新数据
        function updateData(){
            updateRectangles.map((updateRectangle) => {
                const rectGraphic = rectGraphicMap.get(updateRectangle.name)
                // console.log(updateRectangle.materialHeight)
                let isdisabled = updateRectangle.isDisabled == "1" ? true : false;
                rectGraphic.dataHeight = updateRectangle.materialHeight;
                rectGraphic.isDisabled = isdisabled;
                if (!rectGraphic.isSelect){
                    if (isdisabled){
                        drawRect(rectGraphic,dataDisabledColor,rectGraphic.dataX,rectGraphic.dataY,rectGraphic.transformWidth,rectGraphic.transformHeight);
                    }else if ((cellRex.test(rectGraphic.name) || trainRex.test(rectGraphic.name)) && rectGraphic.isWall != "1"){
                        drawRect(rectGraphic,getHexColor(updateRectangle.materialHeight),rectGraphic.dataX,rectGraphic.dataY,rectGraphic.transformWidth,rectGraphic.transformHeight);
                    }
                }
            })
            updateRectangles.length = 0;
        }

        function showSiloName(){
            $.ajax({
                url: CXL.ctxPath + '/silo/list',
                type: 'GET',
                success: function(res) {
                    // console.log(res)
                    if (res.length > 0){
                        res.forEach((d) => {
                            const siloName =  new PIXI.Text(keepAfterS(d.name), { fontSize: 25, fill: 0xffffff });
                            siloName.x = transformX(d.x,realWidth/2) - siloName.width/2;
                            siloName.y = transformY(d.y,realHeight/2) + transformHeight(d.height)/2 + siloName.height/2;
                            app.stage.addChild(siloName);

                            siloNameMatreialMap.set(d.name,d.materialId);
                        })
                    }
                },
                error: function(error) {
                    console.log('Error:', error);
                }
            })
        }

        // 使用正则表达式保留 "s_" 之后的字符串
        function keepAfterS(str) {
            const regex = /s_(.+)/; // 使用捕获组 (.+) 匹配 "s_" 之后的任意字符
            const match = str.match(regex); // 使用 match 方法获取匹配结果

            if (match) {
                return match[1]; // 返回捕获组中的第一个匹配项
            } else {
                return ""; // 如果没有匹配到，则返回空字符串
            }
        }

        //料池显示
        function showPool(){
            $.ajax({
                url: CXL.ctxPath + '/pool/list',
                type: 'GET',
                success: function(res) {
                    // console.log(res)
                    if (res.length > 0){
                        res.forEach((d) => {
                            // console.log(transformX(d.x,realWidth/2) + '  ' + transformY(d.y,realHeight/2))
                            const poolName =  new PIXI.Text(d.name, { fontSize: 25, fill: 0xffffff });
                            poolName.x = transformX(d.x,realWidth/2) - poolName.width/2;
                            poolName.y = transformY(d.y,realHeight/2) + transformHeight(d.height)/2 + poolName.height/2;
                            app.stage.addChild(poolName);

                            const imageTexture = PIXI.Texture.from('/QingTongXia/assets/images/edit.png');
                            const imageSprite = new PIXI.Sprite(imageTexture);
                            // 设置图片精灵的位置
                            imageSprite.width = 30;
                            imageSprite.height = 30;
                            imageSprite.eventMode = "static";
                            imageSprite.buttonMode = true;
                            imageSprite.x = transformX(d.x,realWidth/2) + poolName.width/2;
                            imageSprite.y = transformY(d.y,realHeight/2) + transformHeight(d.height)/2 + poolName.height/2;
                            imageSprite.on('click',function (){
                                layer.open({
                                    type: 2,
                                    title: '编辑',
                                    shadeClose: true,
                                    shade: 0.8,
                                    area: ['700px', '700px'],
                                    content: CXL.ctxPath + "/pool/add?id=" + d.id,
                                    btn: ['确定', '取消'],
                                    yes: function (index, layero) {
                                        //点击确认触发 iframe 内容中的按钮提交
                                        var submit = layero.find('iframe').contents().find("#form-btn-save");
                                        submit.click();
                                        location.reload();
                                    }
                                });
                            });
                            app.stage.addChild(imageSprite);
                        })
                    }
                },
                error: function(error) {
                    console.log('Error:', error);
                }
            })
        }

        function bindPoolVirtualZoneId(cellList){
            $.ajax({
                url: CXL.ctxPath + '/virtualZone/list',
                type: 'GET',
                success: function(res) {
                    // console.log(res)
                    res.forEach(obj => {
                        let poolid = obj.poolId;
                        let id = obj.id;

                        // 判断 map 中是否已存在该 poolid 的 key
                        if (poolVirtualZoneMap.has(poolid)) {
                            // 如果已存在，将当前 id 添加到对应的数组中
                            let idArray = poolVirtualZoneMap.get(poolid);
                            idArray.push(id);
                        } else {
                            // 如果不存在，创建一个新的数组，并将当前 id 添加到数组中
                            poolVirtualZoneMap.set(poolid, [id]);
                        }

                        virtualZoneMaterialMap.set(id,obj.materialId);
                    });
                    drawRectAndBindData(cellList);
                    // 创建一个用于表示选择矩形的图形对象
                    selectionRect = new PIXI.Graphics();
                    selectionRect.lineStyle(2, selectRectColor, 1);
                    selectionRect.drawRect(0, 0, 0, 0);
                    app.stage.addChild(selectionRect);

                    drawBigCrane('0xbc4702',60,30,8,);
                    drawSmallCrane('0xe99618',60,20,'1#')
                    lineStyle
                    showSiloName();
                    showPool();
                },
                error: function(error) {
                    console.log('Error:', error);
                }
            })
        }


        //区域显示
        function initAreaBorder(centerPointX,centerPointY,width,height,name,borderColor,textColor,fontSize){
            const graphics = new PIXI.Graphics();
            graphics.lineStyle(3, borderColor, 1);
            graphics.drawRect(transformX(centerPointX,width),transformY(centerPointY,height), transformWidth(width), transformHeight(height));

            const text = new PIXI.Text(name, {fontSize: fontSize, fill: textColor});
            text.x = (transformX(centerPointX,width) + transformX(centerPointX + width,width))/2 - text.width/2;
            text.y = (transformY(centerPointY,height) + transformY(centerPointY - height,height))/2 - text.height/2;
            app.stage.addChild(graphics);
            app.stage.addChild(text);
        }
        function getFontSize(width){
            return width * 3;
        }

        let isSelecting = false; // 标记是否正在选择
        // 记录选择矩形的起始点
        let startPoint = { x: 0, y: 0 };

        function getPixiMouseX(){
            return app.renderer.events.rootPointerEvent.globalX;
        }
        function getPixiMouseY(){
            return app.renderer.events.rootPointerEvent.globalY;
        }
        // 监听鼠标按下事件
        app.view.addEventListener('mousedown', (event) => {
            isSelecting = true;
            startPoint.x = getPixiMouseX();
            startPoint.y = getPixiMouseY();
            // console.log(app.renderer.events)
        });

        // 监听鼠标移动事件
        app.view.addEventListener('mousemove', (event) => {
            if (isSelecting) {
                // 更新选择矩形的位置和尺寸
                const width = getPixiMouseX() - startPoint.x;
                const height = getPixiMouseY() - startPoint.y;
                selectionRect.clear();
                selectionRect.lineStyle(2, selectRectColor, 1);
                selectionRect.drawRect(startPoint.x, startPoint.y, width, height);
            }
        });

        var tipFlag;
        // 监听鼠标释放事件
        app.view.addEventListener('mouseup', () => {
            isSelecting = false;
            const currentX = getPixiMouseX();
            const currentY = getPixiMouseY();
            selectionRect.clear();
            //防止重复提示
            tipFlag = true;
            rectGraphics.forEach((rect) => {
                if (rect.dataX >= (startPoint.x - mouseOffset) && rect.dataX < (currentX - mouseOffset)
                    && rect.dataY >= (startPoint.y - mouseOffset) && rect.dataY < (currentY - mouseOffset)) {

                    drawRectByCondition(rect,false);

                }
            });
        });


        //选点和取消
        function drawRectByCondition(rect,isSingle){

            if (!rect.isDisabled && pointType != "enable"){
                if (rect.isSelect == false){
                    if (pointType == "grab"){
                        if ((workType == "load" || workType == "pour" )&& rect.cellType == "silo"){
                            layer.msg("上料仓不能作为抓点!")
                        }else{
                            rect.isSelect = true;
                            grabPoints.push(rect);
                            drawRect(rect,grabCorlor,rect.dataX,rect.dataY,rect.transformWidth,rect.transformHeight);
                        }
                    }else if (pointType == "drop"){
                        if (workType == "pour" && rect.cellType == "silo"){
                            layer.msg("倒料模式请勿选择上料仓作为放点！!")
                        }else{
                            rect.isSelect = true;
                            dropPoints.push(rect);
                            drawRect(rect,dropCorlor,rect.dataX,rect.dataY,rect.transformWidth,rect.transformHeight);
                        }
                    }else if (pointType == "disable"){
                        rect.isSelect = true;
                        disabledPoints.push(rect);
                        drawRect(rect,disabledCorlor,rect.dataX,rect.dataY,rect.transformWidth,rect.transformHeight);
                    }

                }else{
                    rect.isSelect = false;
                    let color = getHexColor(rect.dataHeight);
                    if (rect.cellType == "silo"){
                        color = siloColor;
                    }else if (rect.isWall == true){
                        color = wallColor;
                    }
                    drawRect(rect,color,rect.dataX,rect.dataY,rect.transformWidth,rect.transformHeight);
                    if (pointType == "grab"){
                        removePointsFromSelectedPoints(grabPoints,rect);
                        removePointsFromSelectedPoints(dropPoints,rect);
                    }else if (pointType == "drop"){
                        removePointsFromSelectedPoints(dropPoints,rect);
                        removePointsFromSelectedPoints(grabPoints,rect);
                    } else if (pointType == "disable"){
                        removePointsFromSelectedPoints(disabledPoints,rect);
                    }
                }
            }else if (rect.isDisabled && pointType == "enable"){
                if (!rect.isSelect){
                    rect.isSelect = true;
                    enablePoints.push(rect);
                    drawRect(rect,enableColor,rect.dataX,rect.dataY,rect.transformWidth,rect.transformHeight);
                }else{
                    rect.isSelect = false;
                    drawRect(rect,dataDisabledColor,rect.dataX,rect.dataY,rect.transformWidth,rect.transformHeight);
                    removePointsFromSelectedPoints(enablePoints,rect);
                }
            }else {
                if (pointType != "enable"){
                    if (isSingle){
                        layer.msg('该点被屏蔽了', {icon: 5,time: 1000});
                    }else if (tipFlag){
                        layer.msg('区域内包含屏蔽点', {icon: 5,time: 1000});;
                        tipFlag = false;
                    }
                }
            }
        }

        //从抓放点中移除取消选中的点
        function removePointsFromSelectedPoints(selectedPoints,rect){
            if (selectedPoints.length != 0){
                selectedPoints.forEach((item,index) => {
                    if (item.name == rect.name){
                        selectedPoints.splice(index,1);
                    }
                })
            }
        }

        function drawRect(rect,corlor,x,y,w,h){
            rect.clear();
            rect.beginFill(corlor);
            rect.drawRect(x,y,w,h);
            rect.endFill();
        }

        function drawBigCrane(color,width,height,leftWidth){
            const craneContainer = new PIXI.Container();
            const craneRectTop = new PIXI.Graphics();
            const craneRectBottom = new PIXI.Graphics();
            const craneRectLeft = new PIXI.Graphics();
            const cranRectRight = new PIXI.Graphics();
            craneRectTop.beginFill(color);
            craneRectTop.drawRect(0, 0, width, height);
            craneRectTop.endFill();
            craneRectLeft.beginFill(color);
            craneRectLeft.drawRect(0,0,leftWidth,app.screen.height - 47);
            craneRectLeft.beginFill();
            cranRectRight.beginFill(color);
            cranRectRight.drawRect(width - leftWidth,0,leftWidth,app.screen.height - 47);
            cranRectRight.endFill();
            craneRectBottom.beginFill(color);
            craneRectBottom.drawRect(0,app.screen.height - height - 47,width,height)
            craneRectBottom.endFill();
            craneContainer.addChild(craneRectTop);
            craneContainer.addChild(craneRectLeft);
            craneContainer.addChild(cranRectRight);
            craneContainer.addChild(craneRectBottom);
            app.stage.addChild(craneContainer);
            bigCraneMap.set(craneNo,craneContainer);
        }

        function drawSmallCrane(color,width,height,name){
            const smallCraneContainer = new PIXI.Container();
            const smallCrane = new PIXI.Graphics();
            smallCrane.beginFill(color);
            smallCrane.drawRect(0,0,width,height);
            smallCrane.endFill();
            const craneName =  new PIXI.Text(name, { fontSize: 18, fill: 0xffffff });
            craneName.x = 0 + smallCrane.width/2 - craneName.width/2;
            craneName.y = 0 + smallCrane.height/2 - craneName.height/2;
            smallCraneContainer.addChild(smallCrane);
            smallCraneContainer.addChild(craneName);
            app.stage.addChild(smallCraneContainer);
            smallCraneMap.set(craneNo,smallCraneContainer);
        }

        function updateCranePosition(craneX,smallCraneY){
            if (bigCraneMap.size > 0 && smallCraneMap.size > 0){
                const bigCraneContainer = bigCraneMap.get(craneNo);
                const smallCraneContainer = smallCraneMap.get(craneNo);
                TweenMax.to(bigCraneContainer, 1, { x: transformX(craneX,realWidth/2) - bigCraneContainer.width/2, y: 0 });
                TweenMax.to(smallCraneContainer, 1, { x: transformX(craneX,realWidth/2) - smallCraneContainer.width/2, y: transformY(smallCraneY,realHeight/2) - smallCraneContainer.height/2 });
            }
        }

        function getHexColor(value) {
            value = value/1000;
            if (value < 1) {
                return "0x33FF00";
            } else if (value >= 1 && value < 2) {
                return "0x66FF00";
            } else if (value >= 2 && value < 3) {
                return "0x99FF00";
            } else if (value >= 3 && value < 4) {
                return "0xCCFF00";
            } else if (value >= 4 && value < 5){
                return "0xFFFF00";
            }else if ((value >= 5 && value < 6)){
                return "0xFFCC00";
            }else if (value >= 6 && value < 7){
                return "0xFF9900";
            }else if (value >= 7 && value < 8){
                return "0xFF6600"
            }else if (value >= 8 && value < 9){
                return "0xFF3300";
            }else{
                return "0xFF0000";
            }
        }

        //一个池子内，不同子区域用不同的边框
        function getRectBorderColor(index){
            switch (index){
                case 0:
                    return 0xBA55D3;
                case 1:
                    return 0xFF7F50;//de773f
                case 2:
                    return 0x009CEB;
                case 3:
                    return 0x7C4B00;
                case 4:
                    return 0x6600CC;
                case 5:
                    return 0x911EB4;
                case 6:
                    return 0x808000;
                case 7:
                    return 0xff4777;
                case 8:
                    return 0x2e4e7e;
                case 9:
                    return 0x469990;
            }
        }

    })
</script>
</body>
<style>
    .input-extend {
        width: 150px;
        background: #021e2e;
        border: 1px solid #08ffe6;
        color: white;
        border-radius: 10px;
    }

    .backPic{
        height:18em;
        background: url('/QingTongXia/assets/images/pic.png');
        background-repeat: no-repeat
    }
    .formOffset{
        margin-top: 5px;
        margin-left: 15px;
    }
    .formItemOffset{
        margin-top: 15px;
        margin-left: 25px;
        padding-top: 1px;
    }
    .leftContainer{
        width: 15%;
        color: #08ffe6;
        margin-left: 19px;
    }

    ::-webkit-scrollbar {
        width: 5px;
        height: 18px;
        position: absolute
    }

    ::-webkit-scrollbar-thumb {
        background-color: #aaaaaa;
    }
    ::-webkit-scrollbar-corner{
        background-color: #031d29
    }

    ::-webkit-scrollbar-track {
        background-color: #031d29
    }
</style>
</html>
